<!DOCTYPE html>
<html lang="zh_CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <title>${title}</title>

  #include("/cdn/index.html")
  <!--Vue Bootstrap分页插件-->
  <script src="http://cdn.lkangle.cn/js/navigation.js" type="text/javascript"></script>
  <script src="/static/layui/layer/layer.js" type="text/javascript"></script>
  <link rel="stylesheet" href="/static/layui/layer/theme/default/layer.css">

  <script src="/static/layui/laydate/laydate.js" type="text/javascript"></script>
  <link href="http://cdn.lkangle.cn/css/main.css" rel="stylesheet">
  <link href="http://cdn.lkangle.cn/css/main-v2.css" rel="stylesheet">

  <link href="http://cdn.lkangle.cn/css/toolbar.css" rel="stylesheet">

  <link rel="stylesheet" href="http://cdn.lkangle.cn/css/sggn.css">
  <link rel="stylesheet" href="http://cdn.lkangle.cn/css/june-blue.css">
  <link rel="stylesheet" href="http://cdn.lkangle.cn/css/header1.css">
  <link rel="stylesheet" href="/static/layui/laydate/theme/default/laydate.css">

  <link rel="stylesheet" href="http://cdn.lkangle.cn/css/pop-dialog.css">
  <script type="text/javascript" src="http://cdn.lkangle.cn/js/pop-dialog.js"></script>
  <script>
    // document.oncontextmenu = function (ev) {
    //   ev.preventDefault();
    //   return false;
    // }

    $(function () {
      $('.btn[data-loading]').click(function (e) {
        btnToLoading(true);
      });
    });

    function btnToLoading(can) {
      var bs = $('.btn[data-loading]');
      $.each(bs, function (k, v) {
        var b = $(v);
        if (can) {
          var t = b.data('loading').trim();
          b.data('before', b.html());
          b.html(t);
        } else if (b.data('before') != null) {
          b.html(b.data('before'));
        }
      });
    }
    $(document).ajaxComplete(function (e) {
      btnToLoading();
    });

    function uuid(num) {
      return (((Math.random())*Math.pow(10, num+1))|0).toString(16)
    }

    function isEmpty(val) {
      return val == null || val === '' || val.trim() === '';
    }
  </script>
  <style type="text/css">
    .login-reg-btn {
      float: right;
      margin-right: -15%;
    }
    .login-reg-btn ul {
      margin: 0;
      display: flex;
      flex-direction: row;
    }
    .login-reg-btn li {
      display: flex;
      color: #7b7f7f;
      height: 60px;
      align-items: center;
      justify-content: center;
    }
    .login-reg-btn li * {
      color: #7b7f7f;
    }
    .login-reg-btn li a {
      cursor: pointer;
    }

    .modal {
      z-index: 10088;
    }
    a {
      text-decoration: none!important;
    }
    #if(index)
    .slogan {
      border-left: 1px solid #efefef;
    }
    .slogan-t, .slogan-b {
      color: #333;
    }
    .slogan-b {
      margin: 1px 0 0 0;
      background: #61b13b;
      color: #fff;
    }
    .sub-nav {
      background: #fff;
    }
    @media screen and (max-width: 970px) {
      .login-box {

        left: 56px;
      }
    }
    #else
    .header {
      height: 60px;
      background-color: #282d30;
      box-shadow: none;
    }
    .h-con {
      height: 60px;
      box-shadow: none;
      background-color: #282d30;
    }
    .nav-list a {
      color: #fff;
    }
    .userName {
      color: #fff;
    }
    .nav-list .nav-course:hover {
      background: #282d30;
    }
    .nav-list .nav-course.active:hover {
      background: #61b13b;
    }
    .login-after:hover .login-after-top {
      color: #fff;
      background-color: #000;
    }
    .announcement-content {
      overflow: hidden; /*自动隐藏文字*/
      text-overflow: ellipsis;/*文字隐藏后添加省略号*/
      white-space: nowrap;/*强制不换行*/
      width: 8em;/*不允许出现半汉字截断*/
    }
    .cutting {
      overflow: hidden; /*自动隐藏文字*/
      text-overflow: ellipsis;/*文字隐藏后添加省略号*/
      white-space: nowrap;/*强制不换行*/
    }
    .width-180 {
      display: inline-block;
      width: 180px!important;
    }
    @media (max-width: 767px) {
      body.homepage .es-wrap, body.course-list-page .es-wrap, body.open-course-list .es-wrap, body.course-dashboard-page .es-wrap, body.login .es-wrap, body.register .es-wrap, body.my-course .es-wrap {
        padding-top: 0;
      }
    }
    [v-cloak] {
      display: none;
    }
    #end

    .logo-box {
      float: left;
      height: inherit;
    }

    .logo-a {
      display: inline-block;
    }

    .logo-a h3 {
      margin: 17px 10px;
    }
  </style>
</head>
<body class="es-main-default es-nav-default ${index==true?'homepage june':'course-list-page'}">
<!--header头部-->
#if(!isShow)
<header class="header">
  <div class="relative h-con">
    <!--logo-->
    <div class="logo-box">
      <a href="/index" class="logo-a">
        <h3>奋斗实验社区</h3>
      </a>
    </div>
    <div class="slogan">
      <div class="slogan-t">在线课堂</div>
      <div class="slogan-b">课后无忧</div>
    </div>
    <div class="header-search">
      <form action="/search" method="get" id="searchForm">
        <div class="header-search-input-wrap">
          <input class="js-header-search header-search-input" placeholder="搜索课程" name="q">
          <span onclick="$('#searchForm').submit()" class="header-search-icon"></span>
        </div>
      </form>
      <script>
        $('#searchForm').submit(function (e) {
          e.preventDefault();
          var q = $('.header-search-input').val().trim();
          if (q != null && q.length > 0) {
            e.target.submit();
          }
        });
      </script>
    </div>
    <div class="main-width relative main-width-q">
      <nav class="float-right">
        <ul class="nav-list">
          <li><a href="/index" class="${index?'active':''}">首页</a></li>
          <li class="relative">
            <a class="nav-course ${!index?'active':''}" href="/allClass">全部课程</a>
          </li>
        </ul>
      </nav>
      <div class="q-btn-con bg-icon" onclick="$('nav.float-right').toggle()"></div>
      #if(isLogin)
      <!-- 登录后显示 -->
      <div class="login-after absolute">
        <script>
          function loginAfterToggle() {
            var uls = $('.user-list');
            if (uls.css('display') === 'none') {
              uls.css('display', 'block');
            } else {
              uls.css('display', 'none');
            }
          }
        </script>
        <div class="login-after-top" onclick="loginAfterToggle()">
          <p>
            <img src="${user.icon ? user.icon : '/static/img/pk.jpg'}">
            <span class="userName">${user.name?user.name:user.username}</span>
            <span class="bg-icon down-icon"></span>
          </p>
        </div>
        <ul class="user-list">
          #if(role > 2)
          <li>
            <p>
              <a href="/admin/index">后台管理</a>
            </p>
          </li>
          #end
          #if(role > 1)
          <li>
            <p>
              <a href="/user/teacher/myTeach">我的教学</a>
            </p>
          </li>
          #end
          <li>
            <p>
              <a href="/user/learn">我的学习</a>
            </p>
          </li>
          <li>
            <p>
              <a href="/user/setting/info">账户中心</a>
            </p>
          </li>
          <li>
            <p>
              <a href="javascript:" onclick="$.post('/user/logout', function(data) {
                location.href = '/login';
              });">退出登录</a>
            </p>
          </li>
        </ul>
      </div>
      #else
      <!--登录前显示-->
      <div class="absolute login-box login-before hidden-xs">
        <p>
          <span class="bg-icon"></span>
          <a href="/login">登录</a>
          <span>/</span>
          <a href="/register">注册</a>
        </p>
      </div>

      <div class="visible-xs login-reg-btn">
        <ul class="list-unstyled list-inline">
          <li><a href="/login">登录</a></li>
          <li style="padding: 0;">/</li>
          <li><a href="/register">注册</a></li>
        </ul>
      </div>
      #end
    </div>
  </div>
</header>
#end
